body, html{
      height: 100%;
      width: 100%;
      margin: 0%;
      padding: 0%; /* para ocultar el scroll bar de los navegadores web */ 
      /* como no todos tienen el mismo zoom inicial debo hacerlo para evitar que salga el scroll bar en algunos y en otros no*/
      background-color: indigo; 
    }

    #header1 {
      display: block;
      height: 9%;
      background-image: url(dreamlike-flowers.jpg);
      color: white;
      font-family: 'Lobster Two', cursive;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: row wrap;
    }
    #header1 p {
      margin: auto;
      text-align: center;
      font-size: 1.5em;
      font-weight: bolder;
    }

        .footerprincipal  {
      display: block;
      height:9%;
      background-image: url(circles-on-wave-line.jpg);
      background-position: 25% 40%;
      background-size: cover;
      color: white;
      font-family: 'Lobster Two', cursive;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: row;
      margin: 1%;
      border-radius: 0.5em;
    }
    .footerprincipal p  {
      margin: auto;
      font-size: 1em;
      font-weight: bolder;
    }

    .contenido{
      height: 4400px;
      padding-top: 1%;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;  
  
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    /* caracteristicas generales de los elementos del contenedor */

    /* NAV */
    .contenido nav {
      order: 1;
      display: block;
      flex: 1 6 100%;
      background-image: url(elegant-grey-illumination.jpg);
      background-size: cover;
      color: white;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: row;
      border-radius: 1em;
      margin-right: 1%;
    }
    .contenido nav p {
      margin: auto;
      font-size: 1.5em;
    }

    /* SECTION */
    /* como contiene otros elementos html dentro de él pasa de ser un elemento mas del contenedor principal */
    /* ha convertirse en un contenedor secundario, por lo cual se debe declarar con un display propio: */
    /* display: flex y flow: column para estructurar los elementos internos del section */
    .contenido section {
      order: 3;
      flex: 3 1 100%;
      background-image: url(dreamlike-flowers.jpg);
      background-size: cover;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: column; /* se declara column para alinear los elementos internos de forma vertical*/; /* 0% margen superior e inferior, 1% margen izquierdo y derecho */
      border-radius: 3% 3%;
    }

    /* ASIDE */
    .contenido aside {
      order: 2;
      display: block;
      flex: 1 6 100%;
      border-radius: 1em;
      margin-left: 1%;
      text-align: center;
      color: white;
      font-weight: bolder;
      font-size: 1em%;
      background-image: url(antique-scroll.jpg);
      background-size: cover;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: column;
      padding: 0%;
    }
    .contenido aside img {
      margin: 3% 0%0% 5%;

    }


    /**********************************/
    /* Elementos internos del section */
    /**********************************/

    /* HEADER SECTION */
    .presentacion {
      order: 1;
      flex: 1 15 10%;
      margin-top: 2%; 
      margin-bottom: 1%; 
      background-color:rgba(250,250,250,.5);
      border-radius: 12.5%;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: row;
    }
    .presentacion img {
      order: 1;
      flex: 1 6 10%;
      margin-right: 10%%;
      border-radius: 5%;
      height: 100px;


    }
    .presentacion p {
      order 2;
      flex: 6 1 10%;
      font-family: 'Lora', serif;
      font-size: 1.5em;
      margin: 2%;

    }


    /* ARTICLE SECTION */
    .curriculum{
      order: 2;
      flex: 3 15 20%;
      background-color:rgba(250,250,250,.5); 
      border-radius: 12.5%;
    }
    .curriculum p {
      margin-left: 5%;
      font-family: 'Lora', serif;
      text-align: justify;
      font-size: 100%;

    }

    /* FOOTER SECTION */
    .RecursosFavoritos{
      order: 3;
      flex: 15 1 75%;
      background-color:rgba(250,250,250,.5);
      margin-top: 1%; 
      margin-bottom: 0%;
      border-radius: 5%;
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: column;
    }

    .RecursosFavoritos h3 {
      display: block;
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 1.5em;
      font-weight: bolder;
      text-align: center;
      margin: 4%;
      border: 3px solid black;
      border-radius: 0.5em;
    }

    .RecursosFavoritos .recursos {
      display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
      display: -moz-box; /* display para mosilla firefox de versiones antiguas */
      display: -webkit-flex; /* display para google chrome de versiones antiguas */
      display: -ms-flexbox; /* display para internet explorer de versions antiguas */
      display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
      flex-flow: column;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    .RecursosFavoritos .recursos .horizontal {
      border: 0px;
      background-color: transparent;
      max-width: 99.5%;
      max-height: 560px;
      margin: 1% 0.5%;
    }
    .RecursosFavoritos .recursos .vertical {
      padding: 1%;
      border: 1% solid indigo;
      background-color: white;
      min-height: 30%;
      min-width: 90%;
      margin: 3%
    }
    iframe {
      margin: 1%;
    }


			
  

  }/*Si se necesitara cambiar las posiciones de los cuadros*/
  .contenido nav {order: 1;}
  .contenido section {order: 2;}
  .contenido aside {order: 3;}
}